<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueTest</title>
</head>
<body>

<!--按照此网址练习-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

<div id="app-if">
    <h1>hello vue.js!v-if部分</h1>

    <h1 v-if="yes">yes</h1>

    <h1 v-if="no">no</h1>

    <h1 v-if="age >= 25">Age:{{age}}</h1>

    <h1 v-if="name.indexOf('jack')>=0">Name:{{name}}</h1>
</div>

<div id="app-show">
    <h1>hello vue.js!v-show部分</h1>

    <h1 v-show="yes">yes</h1>

    <h1 v-show="no">no</h1>

    <h1 v-show="age >= 25">Age:{{age}}</h1>

    <h1 v-show="name.indexOf('jack')>=0">Name:{{name}}</h1>
</div>

<div id="app-if-show-else">
    <h1>hello vue.js!v-else部分</h1>

    <h1 v-if="yes">im'yes</h1>

    <h1 v-else>im'don't</h1>

    <h1 v-if="no">im'no</h1>

    <h1 v-else>im'not no</h1>

    <h1 v-if="age >= 25">Age:{{age}}</h1>

    <h1>---------------------分割线---------------------</h1>

    <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>

    <h1 v-else>Sex: {{ sex }}</h1>

    <h1 v-show="name.indexOf('jack')>=0">Name:{{name}}</h1>

    <h1 v-else>sex:{{sex}}</h1>

</div>

<div id="app-for">

    <h1>hello vue.js！v-for部分</h1>
    <ul>
        <li v-for="p in people">{{p.name}}</li>
    </ul>
</div>

<script src="../modules/vue.js"></script>
<script>

    // 这是我们的Model，在console中更改，dom和model也更改为对应结果
    var exampleData = {
        message: 'Hello World!'
    }
    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData
    });
    /*if指令*/
    var appData_if = {
        yes: true,
        no: false,
        age: 29,
        name: 'jack'
    }
    var vm_if = new Vue({
        el: '#app-if',
        data: appData_if
    });
    var appData_show = {
        yes: true,
        no: false,
        age: 22,
        name: 'jackross'
    }
    var vm_show = new Vue({
        el: '#app-show',
        data: appData_show
    });

    var appData_else = {
        yes: false,
        no: false,
        age: 28,
        name: 'jakross',
        sex: 'Male'
    }

    var vm_else = new Vue({
        el: '#app-if-show-else',
        data: appData_else
    });

    var vm_for = new Vue({
        el: '#app-for',
        data: {
            people: [{
                name: 'Jack',
                age: 30,
                sex: 'Male'
            }, {
                name: 'Bill',
                age: 26,
                sex: 'Male'
            }, {
                name: 'Tracy',
                age: 22,
                sex: 'Female'
            }, {
                name: 'Chris',
                age: 36,
                sex: 'Male'
            }]
        }
    });


</script>
</body>
</html>